<template>
  <div class="os-main">
    <ConfigForm v-model="dataForm" :config="config" ref="configFormRef" />

    <el-button type="primary" @click="openJson">查看表单数据</el-button>

    <el-drawer v-model="drawerVisiable" title="数据视图" :direction="'rtl'" size="40%">
      <CodeView :code-json="JSON.stringify(dataForm, null, '\t')"></CodeView>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import type { Config } from '@/components/ConfigForm'
import { ElButton } from 'element-plus';
import Demo7 from './components/Demo7.vue'
import Demo8 from './components/Demo8.vue'
import { ref, h, markRaw } from 'vue';
import CodeView from '@/components/CodeView/index.vue'
import ConfigForm from '@/components/ConfigForm/index'

const selectOptions = [
  { label: '男', value: '1' },
  { label: '女', value: '2' },
  { label: '其他', value: '3', disabled: true }
]

const remoteLoading = ref(false)
const remoteOptions = ref<ObjectAny[]>([])
const remoteMethod = (query: string) => {
  if (query) {
    remoteLoading.value = true
    setTimeout(() => {
      remoteLoading.value = false
      remoteOptions.value = selectOptions.filter((item) => {
        return item.label.includes(query)
      })
    }, 500)
  } else {
    remoteOptions.value = []
  }
}

/**ConfigForm绑定对象 */
const dataForm = ref<ObjectAny>({})

/**ConfigForm配置 */
const config = ref<Config>({
  mode: 'add',
  formProps: {},
  rowProps: {},
  columns: [
    { prop: 'demo1', label: '基础单选', type: 'select', options: selectOptions },
    { prop: 'demo2', label: '禁用状态', type: 'select', props: { disabled: true }, options: selectOptions },
    { prop: 'demo3', label: '可清空单选', type: 'select', props: { clearable: true }, options: selectOptions },
    { prop: 'demo4', label: '基础多选', type: 'select', props: { multiple: true }, options: selectOptions },
    { // 自定义模板
      prop: 'demo5', label: '自定义模板', type: 'select',
      options: [
        {
          label: '男', value: '1', slots: {
            default: h('div', {}, [
              h('span', { style: { float: 'left' } }, '男'),
              h('span', { style: { float: 'right', fontSize: '13px', color: '#0e5' } }, '1')
            ])
          }
        },
        { label: '女', value: '2' },
        { label: '其他', value: '3', disabled: true }
      ]
    },
    { // 自定义下拉菜单的头部
      prop: 'demo6', label: '自定义下拉菜单的头部', type: 'select', options: selectOptions,
      slots: {
        header: h('h3', {}, '自定义头部内容')
      }
    },
    { // 自定义下拉菜单的头部(功能性质)
      prop: 'demo7',
      label: '自定义下拉菜单的头部(功能性质)',
      type: 'custom',
      is: markRaw(Demo7),
      props: { dataForm, options: selectOptions },
      events: { change: (key: string, val: string) => { dataForm.value[key] = val } }
    },
    { // 自定义下拉菜单的底部(功能性质)
      prop: 'demo8',
      label: '自定义下拉菜单的底部(功能性质)',
      type: 'custom',
      is: markRaw(Demo8),
      props: { dataForm, options: selectOptions },
      events: {
        change: (key: string, val: string) => { dataForm.value[key] = val },
        addOption: (val: string) => { selectOptions.push({ label: val, value: val }) }
      }
    },
    { // 分组选项
      prop: 'demo9', label: '分组选项', type: 'select',
      options: [
        {
          label: '可选',
          options: [
            { label: '男', value: '1' },
            { label: '女', value: '2' },
          ]
        },
        {
          label: '部分可选',
          options: [
            { label: '不愿透露', value: '3' },
            { label: '沃尔玛购物袋', value: '4', disabled: true }
          ]
        },
        {
          label: '不可选',
          disabled: true,
          options: [
            { label: '其他', value: '2' }
          ]
        },
      ]
    },
    { prop: 'demo10', label: '筛选选项', type: 'select', props: { filterable: true }, options: selectOptions },
    { // 远程搜索
      prop: 'demo11', label: '远程搜索', type: 'select',
      props: {
        multiple: true, filterable: true, remote: true, reserveKeyword: true, remoteMethod,
        loading: remoteLoading, remoteShowSuffix: true, loadingText: '搜索中', noDataText: '没有找到内容'
      },
      options: remoteOptions.value
    },
    { // 创建新的选项
      prop: 'demo12', label: '创建新的选项', type: 'select',
      props: {
        multiple: true, filterable: true, allowCreate: true,
        defaultFirstOption: true, reserveKeyword: false
      }, options: selectOptions
    },
    { // 以对象作为选项值
      prop: 'demo13', label: '以对象作为选项值', type: 'select',
      options: [
        { label: '男', value: { label: '男', value: '1' } },
        { label: '女', value: '2' },
        { label: '其他', value: '3', disabled: true }
      ]
    },
  ]
})


// 数据视图
const drawerVisiable = ref(false)
const openJson = () => {
  drawerVisiable.value = true
}
</script>
